<template>
  <div id="cate-list">
    <div id="cate10" class="level level1 parent0" data-id="10" style="padding-left:0px">
      <div class="cate-content">
        <div class="weight">
          <span class="tree"></span>
          <input type="text" class="weight-input" value="1" data-id="10" />
        </div>
        <div class="catename">
          <i class="Hui-iconfont spread" id="spread10" data-load="0" data-id="10" data-flag="1"></i>
          <span class="cate-id">ID:10</span>
          <input type="text" class="name-input" value="陈皮内容" data-id="10" />
          <a
            class="add_menu ml-20"
            href="javascript:void(0);"
            data-url="https://admin.chenpe.com/menu/add?id=10&amp;trace=3rwq5s"
            data-id="10"
          >添加子分类</a>
        </div>
        <div class="del-cate">
          <a
            href="javascript:void(0);"
            title="编辑"
            class="edit_menu"
            data-url="https://admin.chenpe.com/menu/edit?id=10&amp;trace=3rwq5s"
            data-cid="10"
          >
            <i class="Hui-iconfont"></i>
          </a>
          <a href="javascript:void(0);" title="删除" class="del_menu" data-name="陈皮内容" data-id="10">
            <i class="Hui-iconfont"></i>
          </a>
        </div>
      </div>
    </div>
    <div
      id="cate1026"
      class="level level2 parent10"
      data-id="1026"
      style="padding-left: 50px; display: block;"
    >
      <div class="cate-content">
        <div class="weight">
          <span class="tree"></span>
          <input type="text" class="weight-input" value="24" data-id="1026" />
        </div>
        <div class="catename">
          <i
            class="Hui-iconfont spread"
            id="spread1026"
            data-load="0"
            data-id="1026"
            data-flag="1"
          ></i>
          <span class="cate-id">ID:1026</span>
          <input type="text" class="name-input" value="投票管理" data-id="1026" />
          <a
            class="add_menu ml-20"
            href="javascript:void(0);"
            data-url="https://admin.chenpe.com/menu/add?id=1026&amp;trace=3rwq5s"
            data-id="1026"
          >添加子分类</a>
        </div>
        <div class="del-cate">
          <a
            href="javascript:void(0);"
            title="编辑"
            class="edit_menu"
            data-url="https://admin.chenpe.com/menu/edit?id=1026&amp;trace=3rwq5s"
            data-cid="1026"
          >
            <i class="Hui-iconfont"></i>
          </a>
          <a href="javascript:void(0);" title="删除" class="del_menu" data-name="投票管理" data-id="1026">
            <i class="Hui-iconfont"></i>
          </a>
        </div>
      </div>
    </div>
    <div
      id="cate102604"
      class="level level3 parent1026"
      data-id="102604"
      style="padding-left: 100px; display: block;"
    >
      <div class="cate-content">
        <span class="tree3" style="left:-51px;"></span>

        <div class="weight">
          <span class="tree"></span>
          <input type="text" class="weight-input" value="4" data-id="102604" />
        </div>
        <div class="catename">
          <i
            class="Hui-iconfont spread"
            id="spread102604"
            data-load="0"
            data-id="102604"
            data-flag="1"
          ></i>
          <span class="cate-id">ID:102604</span>
          <input type="text" class="name-input" value="分类排行榜" data-id="102604" />
          <a
            class="add_menu ml-20"
            href="javascript:void(0);"
            data-url="https://admin.chenpe.com/menu/add?id=102604&amp;trace=3rwq5s"
            data-id="102604"
          >添加子分类</a>
        </div>
        <div class="del-cate">
          <a
            href="javascript:void(0);"
            title="编辑"
            class="edit_menu"
            data-url="https://admin.chenpe.com/menu/edit?id=102604&amp;trace=3rwq5s"
            data-cid="102604"
          >
            <i class="Hui-iconfont"></i>
          </a>
          <a
            href="javascript:void(0);"
            title="删除"
            class="del_menu"
            data-name="分类排行榜"
            data-id="102604"
          >
            <i class="Hui-iconfont"></i>
          </a>
        </div>
      </div>
    </div>
    <div
      id="cate102605"
      class="level level3 parent1026"
      data-id="102605"
      style="padding-left: 100px; display: block;"
    >
      <div class="cate-content">
        <span class="tree3" style="left:-51px;"></span>

        <div class="weight">
          <span class="tree"></span>
          <span class="tree2"></span>
          <input type="text" class="weight-input" value="5" data-id="102605" />
        </div>
        <div class="catename">
          <i
            class="Hui-iconfont spread"
            id="spread102605"
            data-load="0"
            data-id="102605"
            data-flag="1"
          ></i>
          <span class="cate-id">ID:102605</span>
          <input type="text" class="name-input" value="设置排行榜" data-id="102605" />
          <a
            class="add_menu ml-20"
            href="javascript:void(0);"
            data-url="https://admin.chenpe.com/menu/add?id=102605&amp;trace=3rwq5s"
            data-id="102605"
          >添加子分类</a>
        </div>
        <div class="del-cate">
          <a
            href="javascript:void(0);"
            title="编辑"
            class="edit_menu"
            data-url="https://admin.chenpe.com/menu/edit?id=102605&amp;trace=3rwq5s"
            data-cid="102605"
          >
            <i class="Hui-iconfont"></i>
          </a>
          <a
            href="javascript:void(0);"
            title="删除"
            class="del_menu"
            data-name="设置排行榜"
            data-id="102605"
          >
            <i class="Hui-iconfont"></i>
          </a>
        </div>
      </div>
    </div>
    <div
      id="cate1027"
      class="level level2 parent10"
      data-id="1027"
      style="padding-left: 50px; display: block;"
    >
      <div class="cate-content">
        <div class="weight">
          <span class="tree"></span>
          <span class="tree2"></span>
          <input type="text" class="weight-input" value="25" data-id="1027" />
        </div>
        <div class="catename">
          <i
            class="Hui-iconfont spread"
            id="spread1027"
            data-load="0"
            data-id="1027"
            data-flag="1"
          ></i>
          <span class="cate-id">ID:1027</span>
          <input type="text" class="name-input" value="同道中酒" data-id="1027" />
          <a
            class="add_menu ml-20"
            href="javascript:void(0);"
            data-url="https://admin.chenpe.com/menu/add?id=1027&amp;trace=3rwq5s"
            data-id="1027"
          >添加子分类</a>
        </div>
        <div class="del-cate">
          <a
            href="javascript:void(0);"
            title="编辑"
            class="edit_menu"
            data-url="https://admin.chenpe.com/menu/edit?id=1027&amp;trace=3rwq5s"
            data-cid="1027"
          >
            <i class="Hui-iconfont"></i>
          </a>
          <a href="javascript:void(0);" title="删除" class="del_menu" data-name="同道中酒" data-id="1027">
            <i class="Hui-iconfont"></i>
          </a>
        </div>
      </div>
    </div>
    <div
      id="cate102701"
      class="level level3 parent1027"
      data-id="102701"
      style="padding-left: 100px; display: block;"
    >
      <div class="cate-content">
        <div class="weight">
          <span class="tree"></span>
          <span class="tree2"></span>
          <input type="text" class="weight-input" value="0" data-id="102701" />
        </div>
        <div class="catename">
          <i
            class="Hui-iconfont spread"
            id="spread102701"
            data-load="0"
            data-id="102701"
            data-flag="1"
          ></i>
          <span class="cate-id">ID:102701</span>
          <input type="text" class="name-input" value="同道酒列表" data-id="102701" />
          <a
            class="add_menu ml-20"
            href="javascript:void(0);"
            data-url="https://admin.chenpe.com/menu/add?id=102701&amp;trace=3rwq5s"
            data-id="102701"
          >添加子分类</a>
        </div>
        <div class="del-cate">
          <a
            href="javascript:void(0);"
            title="编辑"
            class="edit_menu"
            data-url="https://admin.chenpe.com/menu/edit?id=102701&amp;trace=3rwq5s"
            data-cid="102701"
          >
            <i class="Hui-iconfont"></i>
          </a>
          <a
            href="javascript:void(0);"
            title="删除"
            class="del_menu"
            data-name="同道酒列表"
            data-id="102701"
          >
            <i class="Hui-iconfont"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: [
        {
          index: 1,
          id: 1,
          text: '1',
        },
        {
          index: 11,
          id: 11,
          pid: 1,
          text: '11',
        },
        {
          index: 111,
          id: 111,
          pid: 11,
          text: '111',
        },
        {
          index: 112,
          id: 112,
          pid: 11,
          text: '112',
        },
        {
          index: 12,
          id: 12,
          pid: 1,
          text: '112',
        },
        {
          index: 121,
          id: 121,
          pid: 12,
          text: '121',
        },
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.level {
  display: none;
}
.level:hover {
  background-color: #eee;
}
.level:hover .tree2 {
  border-left: 1px solid #eee;
}
.level1 {
  display: block;
  background: none;
}
.cate-content {
  border-left: 1px solid #a9a4a4;
  position: relative;
}
.level1 .cate-content {
  border-left: none;
}
.table {
  margin-top: 20px;
}
.cate-content .catename,
.cate-content .weight {
  float: left;
  margin-top: 7px;
}
.cate-content .del-cate {
  float: right;
  margin-top: 7px;
  margin-right: 4%;
}
ul li .cate-content {
  height: 78px;
  margin-right: 5%;
}
ul li .cate-content:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.cate-content .tree {
  top: -14px;
  left: -26px;
  height: 24px;
  width: 24px;
  display: block;
  border-left: 1px solid #a9a4a4;
  border-bottom: 1px solid #a9a4a4;
  position: absolute;
}
.level1 .cate-content .tree,
.level1 .cate-content .tree2 {
  border: none;
}
.cate-content .tree2 {
  top: 10px;
  left: -26px;
  height: 22px;
  width: 24px;
  display: block;
  border-left: 1px solid #fff;
  border-top: 1px solid #a9a4a4;
  position: absolute;
}
.tree3 {
  position: absolute;
  height: 78px;
  border-left: 1px solid #a9a4a4;
}
.cate-content {
  height: 40px;
}
.catename {
  margin-left: 10%;
}
.catename .Hui-iconfont {
  color: #a9a4a4;
  font-family: "Hui-iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.catename .spread {
  cursor: pointer;
  border: 1px solid #a9a4a4;
}
.catename .add-subcate {
  margin-left: 100px;
}
.catename .add-subcate a {
  color: #333;
}
.weight {
  display: inline-block;
  position: relative;
  margin-left: 50px;
  left: -25px;
}
.catename input {
  width: 150px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: 1px solid #c0c8cf;
  color: #3a3b40;
  font-size: 12px;
  background: #fff;
}
.weight input {
  width: 50px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border: 1px solid #c0c8cf;
  color: #3a3b40;
  font-size: 12px;
  background: #fff;
}
ul.first-ul {
  border: 0 none;
  margin-top: 25px;
}
.del-cate .edit {
  margin-right: 10px;
}
.cate-id {
  margin: 0 10px;
  min-width: 50px;
  display: inline-block;
  height: 26px;
  line-height: 26px;
}
.layui-form-switch {
  margin: 0;
}
</style>
